import { append as svgAppend, create as svgCreate, attr as svgAttr, classes as svgClasses, transform as svgTransform, createTransform } from 'tiny-svg';
import { TASK_BORDER_RADIUS } from '../config';
import deleteImg from '@/assets/img/delete.svg';
const nodeConfig = {
	url: deleteImg,
	x: 0,
	y: 0,
	width: 180,
	height: 80
};

const MAX_CONTENT_LENGTH = 26;
const MAX_DESCRIPTION_LENGTH = 13;

// copied from github.com/bpmn-io/bpmn-js/blob/master/lib/draw/BpmnRenderer.js
const drawRect = function (parentNode, width, height, borderRadius, strokeColor) {
	const rect = svgCreate('rect');

	svgAttr(rect, {
		width: width,
		height: height,
		rx: borderRadius,
		ry: borderRadius,
		stroke: strokeColor || '#000',
		strokeWidth: 2,
		fill: '#fff'
	});

	svgAppend(parentNode, rect);

	return rect;
};

/** 设置节点描边颜色 */
const setRectColor = (store, taskId) => {
	if (store.state.workflow.worksteps[taskId].isFinished) {
		return '#8AA0F2';
	} else if (store.state.workflow.worksteps[taskId].completed && !store.state.workflow.worksteps[taskId].breakRule) {
		return '#000';
	}
	return '#F6A3A1';
};

// copied from https://github.com/bpmn-io/diagram-js/blob/master/lib/core/GraphicsFactory.js
const prependTo = function (newNode, parentNode, siblingNode) {
	parentNode.insertBefore(newNode, siblingNode || parentNode.firstChild);
};

const getExtension = function (element, type) {
	if (!element.extensionElements) {
		return null;
	}
	if (!element.extensionElements.values) {
		return null;
	}

	return element.extensionElements.values.filter(function (e) {
		return e.$instanceOf(type);
	})[0];
};

const drawNode = function (parentNode, element, textRenderer, eventBus, attr) {
	const rect = drawRect(parentNode, nodeConfig.width, nodeConfig.height, TASK_BORDER_RADIUS, attr.rectColor);
	element['width'] = nodeConfig.width;
	element['height'] = nodeConfig.height;

	prependTo(rect, parentNode);

	function translate(x, y) {
		let t = createTransform();

		t.setTranslate(x, y);

		return t;
	}

	// draw title
	const title = attr.title;
	let options = {
		box: element,
		align: 'left-top',
		padding: 5,
		style: {
			fill: '#000000',
			fontWeight: 'bold',
			fontSize: '12px',
			lineHeight: '14px'
		},
		size: {
			width: nodeConfig.width - 60,
			height: 14
		}
	};

	let text = textRenderer.createText(title, options);
	svgClasses(text).add('djs-label');
	svgAppend(parentNode, text);

	// draw content 显示在下面
	let content = attr.content || '';
	if (content.length > MAX_CONTENT_LENGTH) {
		content = attr.content.substring(0, MAX_CONTENT_LENGTH) + '...';
	}
	options = {
		box: element,
		fitBox: true,
		align: 'left-top',
		padding: 5,
		style: {
			fill: '#000000',
			fontWeight: 'normal',
			fontSize: '11px',
			lineHeight: '12px'
		}
	};
	text = textRenderer.createText(content, options);
	svgClasses(text).add('djs-label');
	svgAppend(parentNode, text);

	svgTransform(text, translate(0, 40));

	// draw description 显示在上面
	if (!attr.desc || attr.desc.length <= 0) {
		attr.desc = '-';
	}
	let description = attr.desc;
	if (description.length > MAX_DESCRIPTION_LENGTH) {
		description = attr.desc.substring(0, MAX_DESCRIPTION_LENGTH) + '...';
	}
	options = {
		box: element,
		fitBox: true,
		align: 'left-top',
		padding: 5,
		style: {
			fill: '#000000',
			fontWeight: 'normal',
			fontSize: '11px',
			lineHeight: '12px'
		}
	};
	text = textRenderer.createText(description, options);
	svgClasses(text).add('djs-label');
	svgAppend(parentNode, text);
	svgTransform(text, translate(0, 20));

	// add delete icon
	// const deleteIcon = svgCreate('image', {
	//     x: nodeConfig.width - 22,
	//     y: 2,
	//     width: '20px',
	//     height: '20px',
	//     href: nodeConfig.url,
	//     pointerEvents: 'auto',
	//     cursor: 'pointer',
	// })
	// deleteIcon.addEventListener('click', () => {
	//     eventBus.fire('node-delete-button-click', { title: title, elementId: element.id});
	// }, false);
	// svgAppend(parentNode, deleteIcon)
	return rect;
};

const isValidWorkstepDoData = function (store, taskId) {
	if (
		store.state &&
		store.state.workflow &&
		store.state.workflow.worksteps &&
		store.state.workflow.worksteps[taskId] &&
		store.state.workflow.worksteps[taskId].do &&
		store.state.workflow.worksteps[taskId].do.data
	) {
		return true;
	}
	return false;
};
const isValidWorkstepAfterData = function (store, taskId) {
	if (
		store.state &&
		store.state.workflow &&
		store.state.workflow.worksteps &&
		store.state.workflow.worksteps[taskId] &&
		store.state.workflow.worksteps[taskId].after &&
		store.state.workflow.worksteps[taskId].after.data
	) {
		return true;
	}
	return false;
};

const isValidSummaryDesc = function (store, taskId) {
	if (
		store.state &&
		store.state.workflow &&
		store.state.workflow.worksteps &&
		store.state.workflow.worksteps[taskId] &&
		store.state.workflow.worksteps[taskId].do &&
		store.state.workflow.worksteps[taskId].summary
	) {
		return true;
	}
	return false;
};
// 开启变量判断
const isValidSwitchVariableJudgment = function (store, taskId) {
	if (store.state && store.state.workflow && store.state.workflow.worksteps && store.state.workflow.worksteps[taskId] && store.state.workflow.worksteps[taskId].do) {
		console.warn('isValidSwitchVariableJudgment : ', store.state.workflow.worksteps[taskId]);
		return true;
	}
	return false;
};

const isValidWorkstepDoVideo = function (store, taskId) {
	if (
		store.state &&
		store.state.workflow &&
		store.state.workflow.worksteps &&
		store.state.workflow.worksteps[taskId] &&
		store.state.workflow.worksteps[taskId].do &&
		store.state.workflow.worksteps[taskId].do.video &&
		store.state.workflow.worksteps[taskId].do.video.fileName
	) {
		return true;
	}
	return false;
};

const formatContent = str => {
	const pattern = /({{[^{}]+}})|([^{}]+)/g;
	const matches = str.match(pattern);

	let output = '';

	const result = matches.map(match => {
		if (match.startsWith('{{') && match.endsWith('}}')) {
			// const text = match.slice(2, -2);
			return { text: match, type: 'key' };
		} else {
			return { text: match, type: 'text' };
		}
	});
	result.map(item => {
		if (item.type === 'key') {
			let subs = item.text.split('_');
			subs.splice(subs.length - 1, 1);
			output = output + subs.join('_') + '}}';
		} else {
			output = output + item.text;
		}
	});
	console.log('formatContent : ', str, output);
	return output;
};

const isRecordingFinished = function (store, taskId) {
	if (
		store.state &&
		store.state.workflow &&
		store.state.workflow.worksteps &&
		store.state.workflow.worksteps[taskId] &&
		store.state.workflow.worksteps[taskId].answer &&
		store.state.workflow.worksteps[taskId].answer[0] &&
		store.state.workflow.worksteps[taskId].answer[1] &&
		store.state.workflow.worksteps[taskId].answer[0].do &&
		store.state.workflow.worksteps[taskId].answer[0].do.id &&
		store.state.workflow.worksteps[taskId].answer[1].do &&
		store.state.workflow.worksteps[taskId].answer[1].do.id
	) {
		return true;
	}
	return false;
};

export {
	drawRect,
	prependTo,
	getExtension,
	drawNode,
	isValidWorkstepDoData,
	isValidWorkstepAfterData,
	setRectColor,
	isValidSummaryDesc,
	isValidSwitchVariableJudgment,
	isValidWorkstepDoVideo,
	formatContent,
	isRecordingFinished
};
